<script setup>

import {ref} from "vue";

const count = $ref(0)
const age = ref(0)

function countAdd(){
  count++
}

function ageAdd(){
  age.value++
}
function getEvent(event){
  console.log(event)
  console.log(event.target.tagName)
}

function sayHello(c){
  console.log(c)
}

function onSubmit(){
  console.log('表单提交...')
}

</script>

<template>
  <h4>v-on 事件绑定</h4>
  count:{{count}}<br/>
  <button v-on:click="count++">count累加</button><br/>
  <button v-on:click="countAdd">countAdd累加</button><br/>
  age:{{age}}<br/>
  <button v-on:click="age++">age累加</button><br/>
  <button v-on:click="ageAdd">ageAdd累加</button><br/>

  <h4>拿到事件名称</h4>
  <button @click="getEvent">获取事件名称</button>
  <h4>方法传参</h4>
  <button @click="sayHello(count)">传递参数</button>
  <h4>事件修饰符</h4>
  <button @click.once="count++">只能点击一次</button>
  <h4>事件修饰符 禁止表单自动提交 调用指定方法</h4>
  <!-- 提交事件将不再重新加载页面 -->
  <form @submit.prevent="onSubmit" action="https://www.baidu.com">
    <!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
    <input @keyup.enter="submit" />
    <input type="submit" value="提交">
  </form>

</template>

<style>

</style>
